<template>
  <div class="tbale" :style="{ width: '100%' }">
    <el-table
      :data="tableData"
      :style="{ width: '100%' }"
      :height="offsetHeight"
      flexible
      ref="tableRef"
      border
      fil
      :header-cell-style="{ background: '#ECF5FF' }"
      stripe
      clearSort
      v-bind="$attrs"
      table-layout="auto"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-for="item in column"
        :key="item.prop"
        v-bind="item"
        :width="item.width"
        :fixed="item.prop == 'operation' ? 'right' : false"
      >
        <template #default="scope" v-if="$slots[item.prop]">
          <slot :name="item.prop" v-bind="scope"> </slot>
        </template>
      </el-table-column>
      <template v-slot:empty>
        <el-empty :image-size="150" description="暂时查不到记录"> </el-empty>
      </template>
    </el-table>
    <div class="pages">
      <el-config-provider :locale="zhCn">
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          background
          :page-sizes="[20, 30, 50, 100]"
          :small="small"
          :disabled="disabled"
          :total="maxPage"
          @size-change="handleSizeChange"
          layout=" prev, pager, next, jumper,sizes,total,"
          @current-change="handleCurrentChange"
        />
      </el-config-provider>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, nextTick, defineProps,defineEmits } from "vue";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
const emit = defineEmits('pageChange', 'limitChange');
const currentPage4 = ref(1);
const disabled = ref(false);
const small = ref(false);
const pageSize4 = ref(20);

const props = defineProps({
  offsetHeight: {
    type: Number,
  },
  column: {
    type: Array,
    default: () => [],
  },
  tableData: {
    type: Array,
    default: () => [],
  },
  maxPage: {
    type: Number,
    default: 0,
  },
});

const state = reactive({});

onMounted(() => {});
const handleCurrentChange = () => {
  emit('pageChange', currentPage4.value);
};

const handleSizeChange = () => {
  emit('limitChange', pageSize4.value);
};

const handleSelectionChange = (selection) => {
  emit('selectionChange', selection);
};
</script>

<style lang="less" scoped>
.tbale {
  margin-top: 20px;
  overflow: auto;
}

.pages {
  margin-top: 10px;
  display: flex;
  justify-content: right;
  padding-right: 10px;
  align-items: center;
}

/deep/.is-leaf {
  background-color: #f7f7f7 !important;
  /* 使用 !important 来确保优先级 */
  border-right: none !important;
}
/deep/.el-table__cell {
  border-right: none !important;
}

/deep/.el-table th.el-table__cell.is-leaf {
  text-align: center !important;
}

/deep/.el-table__cell {
  text-align: center !important;
}
</style>
